
<template>
  <el-container class="app-layout">
    <!-- 顶栏 (Header) -->
    <el-header class="header">
      <div class="logo-title">
        <!-- 建议使用绝对路径或在vite/webpack中配置别名 -->

        <span class="title">XXX 管理系统</span>
        <span class="subtitle">SILK ROAD EDUCATION MANAGEMENT PLATFORM</span>
      </div>
      <div class="header-right">
        <el-badge :value="8" class="item">
          <el-icon size="20"><Bell /></el-icon>
        </el-badge>
        <span class="time-display">{{ currentTime }}</span>
        <el-dropdown>
            <span class="el-dropdown-link">
              欢迎光临, 超级管理员<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边栏 (Aside) -->
      <el-aside width="200px" class="aside">
        <el-menu
            :router="true"
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#fff"
            text-color="#333"
            active-text-color="#409EFF"
        >
          <!-- 点击"系统首页"会导航到 /admin/dashboard -->
          <el-menu-item index="/admin/dashboard">
            <el-icon><House /></el-icon>
            <span>系统首页</span>
          </el-menu-item>

          <el-sub-menu index="/admin/members">
            <template #title>
              <el-icon><User /></el-icon>
              <span>会员管理</span>
            </template>
            <el-menu-item index="/admin/members/list">会员列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/admin/category">
            <template #title>
              <el-icon><List /></el-icon>
              <span>类别管理</span>
            </template>
            <el-menu-item index="/admin/category/list">商品分类列表</el-menu-item>
          </el-sub-menu>

          <!-- 示例：其他菜单 -->
          <el-sub-menu index="/admin/product">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/admin/products/list">商品列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/admin/order">
            <template #title>
              <el-icon><TakeawayBox /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/admin/orders/list">订单列表</el-menu-item>
          </el-sub-menu>


        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <!-- 不同的子页面将在这里被渲染 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { House, User, Document, Bell, ArrowDown, List, ChatDotRound, TakeawayBox } from '@element-plus/icons-vue';
import request from '@/util/request.js';

const router = useRouter();
const currentTime = ref('');

const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  currentTime.value = `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
};

// 退出登录处理函数
const handleLogout = async () => {
  try {
    // 确认对话框
    await ElMessageBox.confirm(
        '确定要退出登录吗？',
        '退出确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    );

    const response = await request.post('/admin/logout');

    if (response.data.code === 1) {
      // 清除本地存储的token和用户信息
      localStorage.removeItem('adminToken');
      localStorage.removeItem('adminInfo');
      sessionStorage.removeItem('adminToken');
      sessionStorage.removeItem('adminInfo');

      ElMessage.success('退出登录成功');
      // 跳转到登录页面
      router.push('/admin/login');
    } else {
      ElMessage.error(response.data.msg || '退出登录失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('退出登录失败:', error);

      // 即使后端接口失败，也清除本地token
      localStorage.removeItem('adminToken');
      localStorage.removeItem('adminInfo');
      sessionStorage.removeItem('adminToken');
      sessionStorage.removeItem('adminInfo');

      ElMessage.warning('退出登录完成');
      router.push('/admin/login');
    }
  }
};

let timer;
onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
/* 这些是布局的通用样式 */
.app-layout {
  height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3C8DBC;
  color: white;
  padding: 0 20px;
}
.logo-title {
  display: flex;
  align-items: center;
}
.logo {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.subtitle {
  font-size: 12px;
  margin-left: 10px;
  opacity: 0.8;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.time-display {
  font-size: 14px;
}
.el-dropdown-link {
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
}
.aside {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  height: calc(100vh - 60px); /* 减去header的高度 */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.main-content {
  background-color: #f4f6f9;
  padding: 20px;
  height: calc(100vh - 60px); /* 减去header的高度 */
  overflow-y: auto; /* 如果内容超长则显示滚动条 */
}
</style>
